<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="/views/common/resources.jsp" %>   
<!DOCTYPE html>
<html style="height:100%;">
<head>
	<link rel="icon" href="${basePath}resources/images/login/icon.png" type="image/x-icon"/>
    <title>轨迹回放</title>
    <link rel="stylesheet" type="text/css" href="${basePath}resources/js/common/plugin/dhtmlxGrid/dhtmlxgrid.css"/>
    <link href="${basePath}resources/js/common/plugin/select2/css/select2.min.css" rel="stylesheet" />
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=d782d52560e7b77e0d764b1496c60dde&plugin=AMap.Geocoder"></script>
    <script src="${basePath}resources/js/common/plugin/echarts/echarts.min.js"></script>
    <script src="//webapi.amap.com/ui/1.0/main.js"></script>
    <script src="${basePath}resources/js/common/plugin/select2/js/select2.js"></script>
    <script src="${basePath}resources/js/common/plugin/My97DatePicker/WdatePicker.js"></script>
    <script src="${basePath}resources/js/common/plugin/dhtmlxGrid/dhtmlxgrid.js"></script>
   	<script src="${basePath}resources/js/common/util/common.js"></script>
    <style>
    	#monitorList{
    		height:183px !important;
    	}
    </style>
    <script type="text/javascript">
     var isPlay=false;
     var isGoCenter=false;
     var isVideo=false;
     var vehicleIDTrackLIne="";
     var startTimeTrackLIne="";
     var curTrackLineM=0;
     var endTimeTrackLIne="";
     var startPositionTrackLine="";
     var endPositionTrackLine="";
     var speedList=[];
     var dateList=[];
     var trackInfoArray = [];
     var totalSubsection=null;
     var totalTopDuration=0;
     var totalRunDuration=0;
     var runOrStopDuration=0;
     var exportStartTime="";
     var exportEndTime="";
     var exportVehicleID="";
     var exportAlarmImageTitles="";
     var exportAlarmListInfo=[];
     var exportAlarmColumns=[];
     var exportisRunStopStr="开/停车时长";
     var exportRegistrationNo="";
     var trackintsetInterval=0;
     var trackintsetIntervalIndex=0;
     var  ispause=false;
     var playTime = 200;
     $(document).ready(function(){    	
    	trackSubSectin.init();
     	
    	
    	 $('#btnSaveTrackLine').click(function(){
    		 var name=$("#trackLineName").val();
    		 if($.trim(name)==""){
    			 global.ajaxLoading.pop("请输入名称",false,2000);
    				return ;
    		}
    		 var params = [{
	            	  name : 'name',
	            	  value : name
	              },{
	            	  name : 'vehicleID',
	            	  value : vehicleIDTrackLIne
	              },{
	            	  name : 'startTime',
	            	  value : startTimeTrackLIne	
	              },{
	            	  name : 'endTime',
	            	  value : endTimeTrackLIne
	              },{
	            	  name : 'startPositionTrackLine',
	            	  value : startPositionTrackLine
	              },{
	            	  name : 'endPositionTrackLine',
	            	  value : endPositionTrackLine
	              },{
	            	  name : 'curTrackLineM',
	            	  value : curTrackLineM
	              }];
    		 
    		 $.ajax({
    			type : 'post',
    			async : false,
    			url : appCtx + "/gis/matter/saveTrackLine.html",
    			cache : false,
    			data:params,
    			dataType : "JSON",
    			success : function(data) {
    				if(data.code==0){
    					$('#trackLinePop').modal('hide');
    					global.ajaxLoading.pop(data.msg,false,2000);
    				}else{
    					global.ajaxLoading.pop(data.msg,false,2000);
    				}
    			}	
    		}); 
    		
         });
    	
    	
    	
    	function currentPoint(obj){
    	}
    	$("#exportTack").click(function(){
			if(totalSubsection.length==0){
				global.ajaxLoading.pop("无数据导出",false,2000);
				return;
			}
    		var monitorListCss = $("#monitorList").css("display");
    		exportRegistrationNo=totalSubsection.registrationNo;
    		
     		var imageUrl ="";
    		
    		var objTableDataStr="";
    		for(var i=0;i<totalSubsection.length;i++){
    			objTableDataStr += totalSubsection[i].vehicleNo+"#"+totalSubsection[i].noColor+"#"+totalSubsection[i].acc+"#"+totalSubsection[i].chinaValid+"#"+totalSubsection[i].gpsTimeS+"#"+totalSubsection[i].gpsSpeedF+"#"+totalSubsection[i].gpsMileage+"#"+totalSubsection[i].longitude+"#"+totalSubsection[i].latitude+"&";
    		}
    		console.log(totalSubsection[1]);
    		var objTableDataTtiles="车牌,车牌颜色,ACC,精度,定位时间,速度,里程,经度,纬度";
    		var objTableDataName="轨迹详情";
    		//图片
    		
			var imgsrcList=new Array();
    		imgsrcList.push(imageUrl);
    		var imgsrc= $.toJSON(imgsrcList);
    			
    		var totolTitle="";
    		var totolInfo="";
    		var sheetNameArr=['统计信息'];
    		$("#objTitle th").each(function(index){
    			totolTitle+=$.trim($(this).text())+",";
    		});
    		$("#objInfo td").each(function(){
    			totolInfo+=$.trim($(this).text())+",";
    		});
    		totolTitle=totolTitle.substring(0,totolTitle.length-1);
    		totolInfo=totolInfo.substring(0,totolInfo.length-1);
    		
    		var param =  {
    				objTableDataStr:objTableDataStr,
    				objTableDataTtiles:objTableDataTtiles,
    				objTableDataName:objTableDataName, 
    				startTime:exportStartTime,  
    				endTime: exportEndTime,  
    				vehicleId:exportVehicleID,
    				newSheetName:'统计信息',
    				totolTitle:totolTitle,
    				totolInfo:totolInfo,
    				colModel:"",
    				vehicleNo:exportRegistrationNo,
    				title:totalSubsection[0].vehicleNo+"轨迹数据",
    				imgsrc:""
    		};

    		post(appCtx+"gis/playback/exportTrackBackInfo.html",param);
    		
    		
    	});
    	
    	$('#playTime').change(function(){
    		var time = $(this).val();
    		playTime = 200 / time;
    		if(isPlay){
    			window.clearInterval(trackintsetInterval);
        		trackintsetInterval=window.setInterval("playVehicleTrack();", playTime);
    		}
    	});
    	
    	
    	
    	
    	$("#playTrack").click(function(){
    		if(isPlay){
    			if(ispause){
    				try{
    					ispause=false;
                 		trackintsetInterval=window.setInterval("playVehicleTrack();", playTime);
                	}catch(e){
                		
                	} 
    			}
    			
    			isGoCenter=true;
    		}else{
    			window.clearInterval(trackintsetInterval);
    			if(draw.lineObject.marker!=null){
        			isPlay=true;
        			isGoCenter=true;
        			trackintsetIntervalIndex=0;
        			var trackinfoc=trackInfoArray[0];
              		draw.lineObject.marker.setPosition([trackinfoc.longitude,trackinfoc.latitude]);
              		//trackSubSectin.queryDriverInfo(data.rows[0].driver);
            		try{
                 		trackintsetInterval=window.setInterval("playVehicleTrack();", playTime);
                	}catch(e){
                		
                	} 
        		}else{
        			global.ajaxLoading.pop("请先查询",false,2000);
        		}
    		}    		
    	});
    	
    	$("#pauseTrack").click(function(){
    		if(draw.lineObject.marker!=null){
    			 window.clearInterval(trackintsetInterval);
    			 ispause=true;
    		}else{
    			global.ajaxLoading.pop("请先查询",false,2000);
    		}
  		});
    	$("#stopTrack").click(function(){ 
    		if(draw.lineObject.marker!=null){
    			 window.clearInterval(trackintsetInterval);
    			 var trackinfoc=trackInfoArray[0];
        		 draw.lineObject.marker.setPosition([trackinfoc.longitude,trackinfoc.latitude])
    			 isPlay=false;
    		}else{
    			global.ajaxLoading.pop("请先查询",false,2000);
    		}
  		});
    });
     function isToday(str){
    		var d=new Date(Date.parse(str.replace(/\-/g, "\/")));
    		if (d.toDateString() == new Date().toDateString()){
    			return true;
    		}else{
    			return false;
    		}
    }
     
     function eConsole(param) {
     	var index = param.dataIndex;
     	var indexTrack=trackInfoArray[index];
     	draw.showPoint(indexTrack);
     }
     
     function vehicleMarkerMoveTo(trackinfoc){
    	 draw.lineObject.marker.setIcon(getVehicleStatusPicUrl(trackinfoc.head));
    	 draw.lineObject.marker.G.icon=getVehicleStatusPicUrl(trackinfoc.head);
    	 draw.lineObject.marker.Qi.icon=getVehicleStatusPicUrl(trackinfoc.head);
    	 draw.lineObject.marker.moveTo([trackinfoc.longitude,trackinfoc.latitude],500000);
    	 var bounds =mapTool.map.getBounds();
			if(!bounds.contains([trackinfoc.longitude,trackinfoc.latitude])){
				mapTool.map.panTo([trackinfoc.longitude,trackinfoc.latitude]);
			}
     }
     
     function playVehicleTrack(){
    	 if(trackintsetIntervalIndex<trackInfoArray.length){
    		 var trackinfoc=trackInfoArray[trackintsetIntervalIndex];
    		 vehicleMarkerMoveTo(trackinfoc);
    		 driverInfo(trackinfoc.gpsTimeS);
    	 }else{
    		 window.clearInterval(trackintsetInterval);
    		 trackintsetIntervalIndex=0;
    		 isPlay=false;
    		 var trackinfoc=trackInfoArray[trackInfoArray.length-1];
    		 draw.lineObject.marker.setPosition([trackinfoc.longitude,trackinfoc.latitude])
    	 }
    	 trackintsetIntervalIndex++;
    	 
 	}
    
    function driverInfo(gpsTime){
    	var gpsTimes = new Date(gpsTime).getTime();
    	var data;
    	for(var i=0;i<queryDriverInfoData.length;i++){
    		if(gpsTimes>=queryDriverInfoData[i].startTimes && gpsTimes<= queryDriverInfoData[i].endTimes){
    			data = queryDriverInfoData[i];
    			break;
    		}
    	}
    	var $queryDriverInfo = $('.queryDriverInfo');
    	if(data){
    		var hours = data.totalDriverTime % 3600 / 1000;
    		var hour = (data.totalDriverTime - hours) / 3600 / 1000;
    		var monit = (data.totalDriverTime - hour * 3600) % 60 / 1000;
    		var totalDriverTime =hour + '小时' + monit + '分';
    		var tired = data.tired ? '是' : '否';
    		$queryDriverInfo.find('.driverName').html(data.driverName);
    		$queryDriverInfo.find('.totalDriverTime').html(totalDriverTime);
    		$queryDriverInfo.find('.tired').html(tired);
    		$queryDriverInfo.find('.max_speed').html(data.max_speed + 'km/h');
    		$queryDriverInfo.find('.overspeed_count').html(data.overspeed_count);
    		if(data.imgUrl){
    			$queryDriverInfo.find('.imgUrl img').attr('src',data.imgUrl);
    		}else{
    			$queryDriverInfo.find('.imgUrl img').attr('src',appCtx+'resources/images/touxiang.jpg');
    		}
    	}else{
    		$queryDriverInfo.find('.driverName').html('');
    		$queryDriverInfo.find('.totalDriverTime').html('');
    		$queryDriverInfo.find('.tired').html('');
    		$queryDriverInfo.find('.max_speed').html('');
    		$queryDriverInfo.find('.overspeed_count').html('');
    		$queryDriverInfo.find('.imgUrl img').attr('src',appCtx+'resources/images/touxiang.jpg');
    	}
    	
    }; 
     
     function getVehicleStatusPicUrl(head){
    	    var carStatus = 'car';
    	    var picUrl = appCtx + "resources/images/mapTool/";
    	    try{
    	        picUrl += (carStatus)+getHead(head)+".png";
    	        return picUrl;
    	    }catch(ex){
    	        console.log(ex);
    	        return picUrl  = appCtx + "resources/images/mapTool/car1.png";  //出错的话 默认车辆图标
    	    }
    	}

    	function getHead(head){
    	    var head=head;
    	    if ((head >= 0 && head < 22) || (head >= 336)){
    	        return 3;
    	    }else if (head >=22 && head <66){
    	        return 7;
    	    }else if (head >=66 && head <112){
    	        return 1;
    	    }else if (head >=112 && head <=156){
    	        return 8;
    	    }else if (head >=156 && head <202){
    	        return 4;
    	    }else if (head >=202 && head <= 246){
    	        return 5;
    	    }else if (head >=246 && head <292){
    	        return 2;
    	    }else if (head >=292 && head <336){
    	        return 6;
    	    }else{
    	    	return 3;
    	    }
    	}
     </script>
     <style type="text/css">
     .trackRow{
     	background-color: #F8F8FF;
     }
     td{
     	text-align:left !important;
     }
     th{
     	text-align:left !important;
     }
     </style>
</head>
<body class="trackPlayBack" style="height:100%;">
<div class="page">
	<div class="trackMap">
		<div id="mymap">

		</div>
	</div>
	<div id="showQueryPanel" style="display: none;padding-left: 50px;">
		<a class="satellite"  title="显示查询面板" onclick="trackSubSectin.openQueryCondition();">显示查询面板</a>
	</div>
	<div class="queryDriverInfo pa">
		<p class="p1 clearfix"><span class="fl">当前司机：</span><span class="driverName car-ont"></span></p>
                        		<p class="p1 clearfix"><span class="fl">总时长：</span><span class="totalDriverTime car-ont"></span></p>
                            	<p class="p1 clearfix"><span class="fl">是否疲劳驾驶：</span><span class="tired car-ont"></span></p>
                            	<p class="p1 clearfix dn"><span class="fl">驾驶期间最高时速：</span><span class="max_speed car-ont"></span></p>
                            	<p class="p1 clearfix dn"><span class="fl">驾驶期间超速次数：</span><a class="overspeed_count car-ont"></a></p>
                            	<div class="imgUrl"><img src="../../resources/images/touxiang.jpg"></div>
	</div>
	<div class="pa"  id="queryCondition">
		<a class="pa close"   onclick="trackSubSectin.closeQueryCondition()"></a>
		<%-- <input type="hidden"  id="vid" value="${requestScope.vehicleId}"> --%>
		<div id="stylized" class="myform clearfix">
			<div class="list clearfix fl">
				<!-- <label class="fl labelCont" for="vehicleList">选择车辆:</label> -->
        		<select class="fl selectCont" id="selectVehicleSel" name="vehicleList">
        		</select>
			</div>
        	<div class="list clearfix fl">
        		<!-- <label class="fl labelCont" for="txtStartTime">开始时间</label> -->
            	<input type="text"  value="${startTime}"  id="startTime" class="inputCont fl Wdate Time_input" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})">
        	</div>
        	<div class="list clearfix fl">
        		<!-- <label class="fl labelCont" for="txtEndTime">结束时间</label> -->
            	<input type="text"  id="endTime"  value="${endTime}"  class="inputCont Wdate Time_input" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'%y-%M-%d'})">
        	</div>
       		
        	<a class="list queryBtn fl db" href="javascript:trackSubSectin.clickQuery();">查询</a>
        	<div class="spacer"></div>
		</div>
	</div>
	
	<div id="playControlBox"  style="right: 20px;display: none;">
				<!-- <div id="playControlTitle" style="height: 5px;"> </div> -->
				<div id="playControl">
					<a class="play" id="playTrack"  href="javascript:void(0)" title="播放">
						<i class="play"> 播放</i>
					</a> 
					<a href="javascript:void(0)"  id="pauseTrack" title="暂停" > 
						<i class="stop">暂停</i>
					</a> 
					<a href="javascript:void(0)"  id="stopTrack" title="停止">
						<i class="pause">停止</i>
					</a>
					
					<a href="javascript:void(0)"  id="exportTack" title="导出">
						<i class="export">导出</i>
					</a>
					<select id="playTime" style="width:60px;height:31px !important;border:none;">
						<option value=1>1倍</option>
						<option value=2>2倍</option>
						<option value=4>4倍</option>
						<option value=8>8倍</option>
						<option value=16>16倍</option>
					</select>
				</div>
			</div>
	
	<!-- <div id="nResizeMoveDiv" class="butDragMove"></div>
    <div id="nResizeDiv" class="butDrag" title="拖拽" style=""> <p> 拖拽</p></div> -->
	<div class="monitor-detail">
		<div class="progressBar clearfix"  id="process_sub" style="display:none;">
		</div>
		<div class="monitorCharts" id="monitorCharts">
			
		</div>
		 
         <div class="trackTab pr">
         	<ul class="trackTabTitle clearfix">
         		<li class="list fl active" id="li_tab_0"><a class="db" href="javascript:tabUtils.tabInt.refash(0);" id="tab_0">轨迹汇总信息</a></li>
         	</ul>
         	<div class="line pa"></div>
         	<div class="trackTabCont">
         		<div id="monitorList"></div>
         		<!-- <div class="car-detail list">
		 			<table class="table" id="objTable">
                    	<tr id="objTitle" style="background-color: #ddd;">
                    		<th width="18%" align="left">车牌</th>
                    		<th width="7%" align="left">总里程</th>
                    		<th width="10%"  align="left">行驶时长</th>
                    		<th width="10%" align="left">停车时长</th>
                    		<th width="7%" align="left">超速</th>
                    		<th width="10%" align="left">道路类型超速</th>                    	
                    		<th width="7%" align="left">夜间行车</th>
                    		<th width="7%" align="left">疲劳驾驶</th>
                    		<th width="7%" align="left">图片</th>
                    		<th width="17%" align="left">视频回放</th>
                    	</tr>
         			</table>
        		 </div>
         		</div> -->
         	</div>
         </div>
	</div>
</div>
<!--详情弹窗   -->
<div class="modal detailPop hide fade" id="detailPop">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h5 id="alarmDetailsTitle">历史拍照</h5>
  </div>
  <div class="modal-body">
    <div class="detailTable" id="detailTable">
    	<img alt="历史拍照" src=""  id="hisImage">
    </div>
  </div>
  <div class="modal-footer">
    <a class="btn closeBtn" href="javascript:;" data-dismiss="modal" aria-hidden="true">关闭</a>
  </div>
</div>    

<!--保存线路弹窗   -->
<div class="modal detailPop hide fade" id="trackLinePop" style="width:400px;left:55%">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h5 id="tracklinetitle">保存线路</h5>
  </div>
  <div class="modal-body">
    	  	<div style="height: 30px;margin-bottom: 15px;" ><label style="width: 80px;height: 30px;line-height: 30px;text-align: right;margin-right: 5px;margin-bottom: 0;float:left;">线路名称：</label><input id="trackLineName" style="width: 150px;height: 30px;line-height: 30px;border: 1px solid #dedede;border-radius: 5px;"> </div>
  </div>
  <div class="modal-footer">
  	<a class="btn closeBtn" id="btnSaveTrackLine" href="javascript:;" >保存</a>
    <a class="btn" href="javascript:;" data-dismiss="modal" aria-hidden="true">关闭</a>
  </div>
</div>  
<script src="${basePath}resources/js/common/main/HashMap.js"></script>
<script src="${basePath}resources/js/common/main/mapToop.js"></script>
<script src="${basePath}resources/js/common/reportbase.js?v=72"></script>
<script src="${basePath}resources/js/common/mapUtils.js?v=74"></script>
<script src="${basePath}resources/js/common/main/base64.js"></script>
<script src="${basePath}resources/js/common/main/global.js"></script>
<script src="${basePath}resources/js/common/main/nav.js"></script>
<script src="${basePath}resources/js/business/gis/trackPlay.js?v=82"></script>
</body>
</html>

